<template>
  <div>
    <el-tabs v-model="activeName" >
      <el-tab-pane label="账号管理" name="1">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="账号" prop="user_account">
            <el-input
              type="text"
              v-model="ruleForm.user_account"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" :prop="hasFirst? 'user_password' : ''">
            <el-input
              type="password"
              v-model="ruleForm.user_password"
              autocomplete="off"
              :placeholder="hasFirst ? '请输入':'不修改密码,不用填写'"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="back">取消</el-button>
            <el-button type="primary" @click="submitForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="权限管理" name="2">
        <el-form label-width="100px">
          <el-form-item label="菜单权限" prop="user_account">
            <el-tree
              ref="tree"
              :data="menuData"
              show-checkbox
              node-key="menu_id"
              :props="defaultProps"
            >
            </el-tree>
          </el-form-item>
          <el-form-item>
            <el-button @click="back">取消</el-button>
            <el-button type="primary" @click="saveMenu">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import allianceListAPI from "api/allianceBusinessMg/allianceListAPI";
export default {
  data() {
    return {
      activeName: "1",
      hasFirst: true,
      ruleForm: {},
      rules: {
        user_account: [{ required: true, message: "请输入", trigger: "blur" }],
        user_password: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      menuData: [],
      defaultProps: {
        children: "childs",
        label: "menuZHName",
      },
    };
  },
  methods: {
    async submitForm() {
      await this.$$refs.ruleForm.validate();
      let data = {
        alliance_id: this.curid,
        ...this.ruleForm,
      };
      await allianceListAPI("editAccountInfo", data);
      this.$message.success("编辑成功");
      this.getAccountInfo();
    },
    async saveMenu() {
      let arr = this.$refs.tree.getCheckedKeys()
      let arr2 = this.$refs.tree.getHalfCheckedKeys()
      let data = {
        alliance_id: this.curid,
        menus: arr.concat(arr2)
      };
      await allianceListAPI("editMenu", data);
      this.$message.success("编辑成功");
      this.getMenu();
    },
    async getAccountInfo() {
      let res = await allianceListAPI("getAccountInfo", {
        alliance_id: this.curid,
      });
      if(res.rData && res.rData[0]) {
        let obj = res.rData[0]
        obj.user_account = obj.mobilenum
        this.ruleForm = obj;
      }
      if(this.ruleForm.user_account) {
        this.hasFirst = false
      }
    },
    async getMenu() {
      let res = await allianceListAPI("getMenu", { alliance_id: this.curid });
      // 获取选中的菜单
      let checkArr = []
      function r(arr) {
        arr.forEach(el => {
          if(el.enable == 1) {
            if(el.childs && el.childs.length>0){
              r(el.childs)
            }else{
              checkArr.push(el.menu_id)
            }
          }
        });
      }
      r(res.rData)
      if(checkArr.length) {
        this.$refs.tree.setCheckedKeys(checkArr)
      }
      this.menuData = res.rData;
    },
    back() {
      this.$router.back();
    },
  },
  mounted() {
    this.curid = this.$route.query.id;
    this.getAccountInfo();
    this.getMenu();
  },
};
</script>

<style lang="scss" scoped></style>
